<template>
  <div>
    <HeaderTop>
      <template #left>
        <router-link :to="{ name: 'Search' }"> <van-icon name="search" size="25" /></router-link>
      </template>
      <template #center>
        <router-link :to="{ name: 'Home' }">
          <div class="text-ellipsis fs-2 wd-75 center" style="color: white">
            {{ locationData?.name }}
          </div>
        </router-link>
      </template>
      <template #right>
        <van-icon v-if="user_id" style="transform: translateX(0.3rem);"  name="manager" @click="router.push({name:'Profile'})" />
        <span v-else class="fs-6" @click="router.push({name:'Login'})">登录|注册</span>
      </template>
    </HeaderTop>

    <van-config-provider :theme-vars="themeVars">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#3190e8" lazy-render>
        <van-swipe-item
          ><van-grid :border="false">
            <van-grid-item
              v-for="item in foodKindList?.slice(0, 8)"
              :key="item.id"
              :text="item.title"
              @click="goToCategory(item)"
            >
              <template #icon>
                <van-image
                  width="1.2rem"
                  height="1.2rem"
                  :src="imageBaseUrl + item.image_url"
                /> </template
            ></van-grid-item>
          </van-grid>
          ></van-swipe-item
        >
        <van-swipe-item
          ><van-grid :border="false">
            <van-grid-item
              v-for="item in foodKindList?.slice(8, 16)"
              :key="item.id"
              :text="item.title"
              @click="goToCategory(item)"
            >
              <template #icon>
                <van-image
                  width="1.2rem"
                  height="1.2rem"
                  :src="imageBaseUrl + item.image_url"
                /> </template
            ></van-grid-item>
          </van-grid>
          ></van-swipe-item
        >
      </van-swipe>
    </van-config-provider>
    <span class="back-page py-1 d-block" v-if="foodKindList?.length"></span>

    <ShopList :latitude="latitude" :longitude="longitude" :limit="20">
      <template #title>
        <div class="text-3 mt-2 mb-4 mx-2">
          <van-icon name="shop-o" />
          <span class="block mx-1">附近商家</span>
        </div>
      </template>
    </ShopList>

    <TabBar></TabBar>
  </div>
</template>
<script lang="ts">
export default {
  name: "Msite",
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { constPinia ,user } from "@/store/index";
import { Location_format, foodKind_format } from "@/type/index";
import { getLocation, getFoodKindList } from "@/api";
import { useRouter } from "vue-router";
const router = useRouter();
//获取pinia存储的经纬度信息
const { latitude, longitude, geohash } = storeToRefs(constPinia());
const { user_id } = storeToRefs(user());
//修改vant样式
const themeVars = {
  gridItemContentPadding: "0.3rem",
};
//获取定位信息
const locationData = ref<Location_format>();

const getLocationAddress = async () => {
  if (geohash.value) {
    const res = await getLocation<Location_format>(geohash.value);
    locationData.value = res;
  } else {
    locationData.value.name = "q请选择地点";
  }
};

const imageBaseUrl = "https://fuss10.elemecdn.com";
//获取食物种类
const foodKindList = ref<foodKind_format>();
const getFoodKinds = async () => {
  const res = await getFoodKindList<foodKind_format>();
  foodKindList.value = res;
};
//解码获取食物种类id
const getCategoryId = encodeUrl => {
  const url = decodeURIComponent(encodeUrl.split("=")[1].replace("&target_name", ""));
  if (/restaurant_category_id/gi.test(url)) {
    return JSON.parse(url).restaurant_category_id.id;
  } else {
    return "";
  }
};

//跳转到category页面
const goToCategory = item => {
  const id = getCategoryId(item.link);
  router.push({
    name: "Category",
    query: {
      id,
      headTitle: item.title,
    },
  });
};
//初始化(发请求)
const initData = () => {
  getLocationAddress();
  getFoodKinds();
};
//调用初始化函数
initData();
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
}
</style>
